<template>
  <div v-show="show" class="addGoods">
    <div v-if="tableData.addType" class="flowDiv">
      <p>{{ tableData.executionName }}</p>
      <div><img src="../../../../static/images/flowDepartment.png" alt=""></div>
      <p>{{ tableData.newExecutionName | changetime }}</p>
    </div>
    <div class="modularContainer">
      <div class="itemContainer">
        <div class="itemModule">
          <div class="flex-sc" @click="changedepartment()">
            <div class="lineL flex-sc">
              <p class="itemTitle">部门：</p>
              <div class="flex-ss itmeContent">
                <p v-for="(item,index) in departList" :key="index">{{ item.departId }} &nbsp; &nbsp;</p>
              </div>
            </div>
            <div class="lineR">
              <img class="arrow_btn" src="../../../../static/images/arrow_btn.png" alt="">
            </div>
          </div>
          <div v-if="tableData.addGoodsNumber >0" class="flex-sc">
            <div class="lineL flex-sc">
              <p class="itemTitle">筛选商品：</p>
              <div class="flex-ss itmeContent">
                <p>{{ tableData.addGoodsNumber }}件</p>
              </div>
            </div>
            <div class="lineR" />
          </div>
          <div v-if="tableData.totalGoodsNumber >0" class="flex-sc">
            <div class="lineL flex-sc">
              <p class="itemTitle">添加完后商品共：</p>
              <div class="flex-ss itmeContent">
                <p>{{ tableData.totalGoodsNumber }}件</p>
              </div>
            </div>
            <div class="lineR" />
          </div>
        </div>
      </div>
      <div>
        <div class="btn" @click="toConfirm">{{ customData.confirm_btn }}</div>

        <div class="btn_white" @click="toCancle">取消</div>
      </div>
    </div>
    <template>
      <WPTX_CHOOSE_DEPARTMENT
        :show="chooseDepartmentShow"
        :select-member-set="selectMemberSet"
        @confirm="setDepartment"
        @cancle="setcancle"
      />
    </template>
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import $ from 'jquery'
import _validate from '../../../components/framework/commonJs/wptx_validate'
import _tools from '../../../components/framework/commonJs/wptx_tools'
import _common from '../../../components/framework/commonJs/wptx_common'
import _storewxtaskAPI from '../../../components/framework/API/storewxtaskapi'
import WPTX_CHOOSE_DEPARTMENT from '../../../components/framework/commonTemplate/wptx_choose_department'

const _FUNCTION_NAME = _common.pageName.WPTXADDGOODS
const _ROUTER_NAME = _common.router.TASTLIST
export default {
  components: {
    'WPTX_CHOOSE_DEPARTMENT': WPTX_CHOOSE_DEPARTMENT
  },

  filters: {
    changetime(val) {
      if (_validate.checkKong(val)) {
        return '新建执行事项'
      } else {
        return val
      }
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    departItemsDTOList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      tableData: {
        addGoodsNumber: 0, // 选择部门的数量
        totalGoodsNumber: 0, // 添加后的总数量
        addType: 0, // 新建的执行事项 0 新建 1流转新建
        executionId: '', // 流转执行事项id
        executionName: '', // 流转执行事项名称
        newExecutionName: ''// 新建的执行事项name
      },
      searchData: {},
      searchDataBuffer: {},
      pageData: {},
      dialogData: {},
      historyData: {},
      infoData: {},
      /* 选择部门 */
      chooseDepartmentShow: false,
      selectMemberSet: {},
      departList: [], // 部门的返现列表
      alreadyDepartList: [], // 已经选择的部门列表（由上个页面传递过来的）
      customData: {
        activeName: 'content', // tabs 页面默认值
        stretch: false, // tabs 标签不能自动撑开
        specialType: 0, // (任务的类型：0为普通任务，1为playbook任务)
        storeMgr: false, // 当前登录人是否为店总
        taskId: '', // 当前任务的ID
        confirm_btn: '添加'
      },
      PageStatus: 1, // 当前页面状态
      taskStatus: 0 // 当前任务状态
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.onInit()
      }
    }
  },
  mounted() {
    const self = this
    self.customData.taskId = _tools.getSessionStorage('taskId', self.$route.params.taskId)
  },
  methods: {
    onInit() {
      const self = this
      self.tableData.addType = _validate.checkBooleanString(_tools.getSessionStorage('addType'))
      self.tableData.executionId = _tools.getSessionStorage('executionId')
      self.tableData.executionName = _tools.getSessionStorage('executionName')
      self.tableData.newExecutionName = _tools.getSessionStorage('newExecutionName')
      if (self.tableData.addType) {
        self.customData.confirm_btn = '流转'
      } else {
        self.customData.confirm_btn = '添加'
      }
      self.departList = []
      self.tableData.addGoodsNumber = 0
      self.tableData.totalGoodsNumber = 0
      if (self.departItemsDTOList.length === 0) {
        return
      }
      let cont = 0
      self.departItemsDTOList.map(item => {
        cont = cont + item.itemsNum
        return item
      })
      self.departList = self.departItemsDTOList
      self.tableData.addGoodsNumber = cont
      self.tableData.totalGoodsNumber = self.tableData.totalGoodsNumber + cont
    },

    onSearch() {},
    onChangePage() {},
    onReset() {},
    ONadd() {},
    onDelete(data) {},
    onInfo(data) {},
    onUpdate(data) {},
    onBathDelete() {},
    onBathUpdate() {},
    onDisable(data) {},
    onEnable(data) {},
    onUpload() {},
    onBathUpload() {},
    onExport() {},
    onDownload() {},
    onHistory() {},
    callBack_init(data) {
      const self = this
    },
    // 添加部门
    changedepartment() {
      const self = this
      self.chooseDepartmentShow = true
      const selectMemberSet = new Object()
      selectMemberSet.checkMore = true // true多选/false单选
      selectMemberSet.yesToNull = true// true可空/false不可空
      selectMemberSet.checkedList = [] // 反显列表
      selectMemberSet.checkedList = self.departList // 将还有wechatUserId的人员数据放到反显列表
      self.selectMemberSet = selectMemberSet
    },
    /* 接收返回参数*/
    setDepartment(val) {
      const self = this
      this.chooseDepartmentShow = false
      self.departList = []
      self.tableData.addGoodsNumber = 0
      self.tableData.totalGoodsNumber = 0
      if (_validate.checkListEmpty(val)) {
        return
      }
      let cont = 0
      val.map(item => {
        cont = cont + item.itemsNum
        return item
      })
      // 设置筛选部门
      self.departList = val
      // 设置筛选部门的商品
      self.tableData.addGoodsNumber = cont
      // 设置筛选部门后商品总数
      self.tableData.totalGoodsNumber = self.tableData.totalGoodsNumber + cont
      document.documentElement.style.overflow = 'scroll'
    },
    setcancle() {
      this.chooseDepartmentShow = false
      document.documentElement.style.overflow = 'scroll'
    },
    toCancle(e) {
      const self = this
      this.$emit('cancle')
      e.preventDefault()
      self.departList = []
      self.tableData.addGoodsNumber = 0
      self.tableData.totalGoodsNumber = 0
    },
    // 返回上一页
    toConfirm() {
      const self = this
      this.$emit('confirm', JSON.parse(JSON.stringify(self.departList)))
      self.departList = []
      self.tableData.addGoodsNumber = 0
      self.tableData.totalGoodsNumber = 0
    }
  }
}
</script>
<style scoped>
  .addGoods {
   position: fixed;
   width: 100%;
   height:100%;
   left: 0;
   top:0;
   background-color: #f8f8f8;
  }
  .tabNav {
    height: 50px;
    line-height: 50px;
    width: 100%;
    font-size: 17px;
    background-color: #fff;
    border-bottom: 1px solid #eee
  }
  .modularContainer {
    background-color: #f8f8f8;
    padding-bottom: 120px
  }
  .itemContainer {
    background-color: #fff
  }
  .itemContainer .itemModule {
    padding: 0 15px;
  }
  .itemModule>div{
    padding:0!important;
  }
  .btn {
    width: 90%;
    height: 40px;
    background: rgba(0, 113, 206, 1);
    border-radius: 25px;
    margin: 30px auto;
    color: #fff;
    text-align: center;
    line-height: 40px;
  }
  .btn_white {
    width: 90%;
    height: 40px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 25px;
    margin: 30px auto;
    color: rgba(0, 113, 206, 1);
    text-align: center;
    line-height: 40px;
  }
  .itemModule>div {
    line-height: 42px;
    border-bottom: 1px solid #eee
  }
  .flowDiv{
    text-align: center;
    padding: 30px;
  }
  .flowDiv div{
    margin:15px;
  }
</style>
